<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">add</button>

    <hr>
    <p>{{obj.name}}</p>
    <button @click="newName">modify</button>
  </div>
</template>

<script>
import { reactive, ref,watch } from "vue";
export default {
  name: "App",
  setup() {
    const count = ref(0);
    const add = () => {
      count.value ++;
    };
    watch(count,(newVal,oldVal)=>{
        console.log(newVal,oldVal);
    })


    const obj = reactive({
        name:'zs',
        age:18
    })
    const newName = () =>{                                   
        obj.name='ls'
    }
    // 监听一个对象的数据变化
    watch(obj,(newVal,odlVal)=>{
        console.log(newVal.name,odlVal.name);
    })
    // 监听多个数据的变化
    watch([count ,obj],()=>{
        console.log("多个数据改变")
    })
    // 监听某个对象下的某一个属性
    watch(()=>obj.name,()=>{
        console.log("obj.name变化");
    },{
        //深度监听
        deep:true,
        //默认执行一次
        immediate:true
    })
    return { count, add,obj,newName };
  },
};
</script>

<style></style>
